<template>
    <view class="content">
        <div class="lr-warp">
            <image src="../../static/images/login.png" class="logo"></image>
            <div class="lr-title">
                <h1>登录</h1>
                <p>欢迎来到娱客</p>
            </div>
            <div class="lr-list">
                <div class="lr-item">
                    <image src="../../static/images/f_phone.png" class="icon"></image>
                    <input type="text" value="" v-model="submit_data.shop_num" placeholder="请输入手机号" />
                </div>
                <div class="lr-item">
                    <image src="../../static/images/f_lock.png" class="icon"></image>
                    <input type="password" v-model="submit_data.shop_pass" value="" placeholder="请输入密码" />
                </div>
            </div>
            <button class="lr-btn" @tap="submitData">登录</button>
            <div class="oper-warp">
                <a @tap="Jump('../register/index')">免费注册</a>
                <a href="">找回密码</a>
            </div>
            <image src="../../static/images/l_bottom.png" class="l_bottom"></image>
        </div>
    </view>
</template>
<script>
    export default {
        data(){
            return {
                submit_data : {
                    shop_num : '',
                    shop_pass : ''
                }
            }
        },
        methods : {
            submitData() {
                let t = this;
                if (!this.submit_data.shop_num) {
                	this.util.uToast({
                		tit: '请输入手机号码'
                	});
                	return false;
                }
                if (!this.submit_data.shop_pass) {
                	this.util.uToast({
                		tit: '请输入登录密码'
                	});
                	return false;
                }
                let param = {};
                param.is_loading = true;
                param.url = "api/shop/login/login";
                param.data = {};
                param.data.shop_num = this.submit_data.shop_num;
                param.data.shop_pass = this.submit_data.shop_pass;
                this.util.requests(param, res => {
                    let data = res.data;
                    if( data.code == 1 ) {
                        uni.setStorageSync('userinfo', data.data.shop);
                        uni.setStorageSync('token', data.data.token);
                        uni.showModal({
                            title: '提示',
                            showCancel: false,
                            content: '登录成功',
                            success: function(res) {
                                if (res.confirm) {
                                    uni.redirectTo({
                                        url: '../index/index'
                                    })
                                }
                            },
                        });
                    }
                });
            },
            Jump(url) {
                uni.navigateTo({
                    url: url
                })
            },
        }
    }
</script>
<style>
    page {
        background: linear-gradient(to bottom, #f920fc 0%, #7f00ff 100%);
    }

    .content {
        padding-bottom: 1upx;
    }

    .logo {
        width: 91upx;
        height: 80upx;
        display: block;
        margin: 0 auto;
    }

    .lr-warp {
        background: #2d2d2d;
        margin: 100upx 30upx 20upx 30upx;
        border-radius: 15upx;
        padding: 40upx;
        position: relative;
        z-index: 100;
    }

    .l_bottom {
        position: absolute;
        width: 100%;
        height: 32upx;
        left: 0;
        bottom: -22upx;
        z-index: -1;
    }

    .lr-warp .lr-title h1 {
        font-size: 38upx;
        color: #fff;
        margin-bottom: 20upx;
    }

    .lr-warp .lr-title p {
        font-size: 28upx;
        color: #fff;
    }

    .lr-list {
        margin: 130upx 0 145upx 0;
    }

    .lr-list .icon {
        width: 34upx;
        height: 34upx;
    }

    .lr-list .lr-item {
        padding: 20upx 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1upx solid #ffffff;
        margin-bottom: 60upx;
    }

    .lr-list .lr-item input {
        flex: 1;
        font-size: 28upx;
        color: #fff;
        margin: 0 20upx 0 70upx;
    }

    .lr-btn {
        height: 70upx;
        line-height: 70upx;
        color: #fff;
        font-size: 32upx;
        text-align: center;
        border-radius: 100upx;
        margin-bottom: 50upx;
        background: #fb21fc;
    }

    .oper-warp {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .oper-warp a {
        display: block;
        color: #fb21fc;
        font-size: 24upx;
    }
</style>
